<template>
  <el-dialog v-model="dialogFormVisible" title="修改密码" width="380">
    <el-form ref="formRef" v-loading="isLoading" :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="当前用户：" style="color: var(--el-color-primary);">
        {{ userInfo.user.name }}
      </el-form-item>
      <el-form-item style="width: 100%;" prop="password" :rules="v.getRules(true)">
        <el-input prefix-icon="Lock" size="large" v-model="form.password" type="password" placeholder="当前用户密码"
          show-password :validate-event="false" />
      </el-form-item>
      <el-divider style="margin-top: 4px;" border-style="dashed"><el-icon>
          <Lock />
        </el-icon><span v-if="forUserKeys.length > 1 || forUserKeys.length < 1">&nbsp;更新{{ forUserKeys.length
          }}人</span></el-divider>
      <el-form-item style="width: 100%;" prop="newPaswword1"
        :rules="v.getRegExpRules(v.ValidRxs.indexKey, true, 6, 32)">
        <el-input prefix-icon="Lock" size="large" v-model="form.newPaswword1" type="password" placeholder="新密码"
          show-password :validate-event="false" />
      </el-form-item>
      <el-form-item style="width: 100%;" prop="newPaswword2"
        :rules="v.getCustomRules(validateNewPaswword2, true, 6, 32)">
        <el-input prefix-icon="Lock" size="large" v-model="form.newPaswword2" type="password" placeholder="重复新密码"
          show-password :validate-event="false" />
      </el-form-item>
      <div style="text-align: center;">
        <el-button style="width: 100%;margin-top:20px  ;" @click="submitForm" size="large"
          type="primary">修改密码</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import v from '@/hook/cupkFormValids';
import { useUserInfoStore } from '@/store/useUserInfoStore';
import cupkPasswordUtils from '@/hook/cupkPasswordUtils';
import Cupk2Request from '@/service/remoteRequests/Cupk2Request';
import type { DataResponse } from '@/types/commons/DataResponse';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import notice from '@/components/msg/CupkNotice';
const userInfo = useUserInfoStore();
const dialogFormVisible = ref(false)
const isLoading = ref(false);
const form = reactive({
  password: '',
  newPaswword1: '',
  newPaswword2: '',
});

const forUserKeys = reactive([]);

let codes = { webcode: { code: "", val: "" }, syscode: "", imgcode: "" }

const formRef = ref();


const props = defineProps({
  updateUrl: {
    type: String,
    required: true
  },
});


const openWin = (userKeys: Array<string>) => {
  dialogFormVisible.value = true;
  forUserKeys.length = 0;
  Object.assign(forUserKeys, userKeys);
}

/**
 * 校验password2和password1是否相同
 * @param _rule
 * @param _value
 * @param callback
 */
const validateNewPaswword2 = (_rule: never, _value: string | undefined, callback: (arg0?: Error) => void) => {
  if (form.newPaswword1 == form.newPaswword2) {
    callback();
  } else {
    callback(new Error("两次新密码不同"));
  }
};

const submitForm = async () => {

  await formRef.value.validate((valid: boolean) => {
    if (valid) {


      Cupk2Request.submit("api/login/info", RequestTypeEnum.post, isLoading, {
        loginname: userInfo.$state.user.loginname, password: 'none', code: 'none'
      }).then((dataResponse: DataResponse) => {
        codes = dataResponse.data as { webcode: { code: string, val: string }, syscode: string, imgcode: string };
        cupkPasswordUtils.encodeWebPassword(codes.syscode, codes.webcode.val, form.password, (web_Password: string) => {
          cupkPasswordUtils.encodeSysPassword(form.newPaswword1, (sysPassword: string) => {

            Cupk2Request.submit(props.updateUrl, RequestTypeEnum.post, isLoading,
              { loginname: userInfo.$state.user.loginname, webPassword: web_Password, code: codes.webcode.code, userkeys: forUserKeys, newSysPassword: sysPassword }

            ).then((_dataResponse: DataResponse) => {

              notice.bySuccess("修改成功");
              formRef.value.resetFields();
              dialogFormVisible.value = false;
            }).catch((msg: Error) => {
              notice.byError(msg.message);
            });
          })
        });
      }).catch((msg: Error) => {
        notice.byError(msg.message);
      });
    }
  });
}

defineExpose({
  openWin
});
</script>
<style>
.el-divider .el-divider__text {
  background-color: transparent;
}
</style>
